<template>
    <div>
        <el-col :span="24" class="action-bar">
            <el-button type="primary" size="medium" @click="reBack">返回</el-button>
        </el-col>
        <div class="form-wrapper" v-if="postData">
           <div class="form-table">
            <el-form label-position="left" label-width="80px" >
                <el-form-item label="发布者">
                    <div style="display:flex;align-items:center">
                        <img :src="postData.photo_url" alt="" style="width=60px;height:60px;obj-fit:contain;border-radius:50%;margin-right:20px">
                        <span>{{postData.user_name}}</span>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="关联话题">
                    123123(暂无)
                </el-form-item> -->
                <el-form-item label="发布时间">
                    {{postData.updated_at}}
                </el-form-item>
                <el-form-item label="帖子详情">
                    <div v-html="postData.content" class="richText"></div>
                </el-form-item>
                <el-form-item label="视频" v-if="postData.video_url_array.length">
                    <video controls  :src="item" v-for="(item,index) of postData.video_url_array" :key="index" class="video-item"></video>
                </el-form-item>
                <el-form-item label="图片" v-if="postData.img_url_array.length">
                    <img :src="item" v-for="(item,index) of postData.img_url_array" :key="index" class="img-item"/>
                </el-form-item>
            </el-form>
           </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'postDetail',
    data() {
        return {
            id:'',
            postData:''
        }
    },
    methods:{
        reBack(){
            this.$router.go(-1)
        },
    
        
    },
    mounted() {
            if(this.$bus.$data.postItem){
                this.postData=this.$bus.$data.postItem
            }
    },
    destroyed() {
        this.$bus.$data.postItem=''
    },
}
</script>
<style lang="scss" scoped>
    .form-wrapper{
       display: flex;
       justify-content: center;
       width:100%;
       flex-wrap: wrap;
       .form-table{
           margin:20px;
           display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 80%;
            border: 1px solid #eee;
            box-shadow: #eee 5px 5px 20px;
            padding:20px;
            .img-item{
                max-width: 30%;
            }
            .video-item{
                max-width:100%;
                max-height: 300px
            }

       }
    }

</style>
<style>
    .richText img{
        max-width:100%;
    }
</style>